<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  事件对象和事件委托（事件代理）

  事件代理指的是通过冒泡 将子元素的事件绑定到父元素上处理

  <ul id="box" style="border: 1px solid #000; ">
    <li>13</li>
    <li>231</li>
    <li>312421</li>
    <li>23`</li>
    <li>789</li>
    <li>57</li>
  </ul>

  <script>
    // currentTarget获取事件绑定的对象 box.onclick就是box
    // target获取点击的子元素 （事件冒泡原理） 
    /* 
    let box = document.getElementById('box')
    box.onclick = function (ev) {
      // e就是事件对象 兼容性写法
      let e = ev || event
      // console.log(e);
      // 获取事件类型
      // console.log(e.type);

      // console.log(e.currentTarget); // <ul>
      console.log(e.target); // 点击li获取li, 点击ul获取ul
    }
 */

    // 循环绑定事件老式写法
    /* 
    let oLi = document.getElementsByTagName('li')
    for (var i = 0; i < oLi.length; i++) {
      item = oLi[i]
      item.onclick = (function (i) {
        return function () {
          console.log(i);
        }
      })(i)
    }
 */

    console.log(1);

    setTimeout(() => {
      console.log(2);
    }, 1000)
    // 事件代理写法
    // 通过事件冒泡将事件绑定到父元素上一起处理
    let box = document.querySelector('#box')
    oLi = document.querySelectorAll('li')
    lis = Array.prototype.slice.call(oLi)

    box.onclick = function (ev) {
      let e = ev || event
      target = e.target || e.srcElement
      console.log(lis.indexOf(target));
    }

    console.log(3);
    console.log(4);
    console.log(5);

    setTimeout(() => {
      console.log(666);
    }, 1000)
  </script>
</body>

</html>